<template>
	<view @touchmove.stop.prevent="handleTouch">
		<u-popup :show="show" @close="close" mode="bottom" round="20">
			<view class="couponArea">
				<view class="title">
					<view class="text">优惠券</view>
					<view class="closeIcon" @click="close">
						<u-icon size="24" name="close"></u-icon>
					</view>
				</view>
				<scroll-view class="couponList" :scroll-y="true">
					<view v-for="(item,index) in couponList" :key="item.id">
						<CouponItem :coupon="item" @couponClick="couponClick(item)" />
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import CouponItem from '../couponItem/index.vue'
	export default {
		name: 'couponPop',
		components: {
			CouponItem
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			couponList: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			handleTouch() {
				return false
			},
			couponClick(item) {
				this.$emit('couponClick', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.couponArea {
		padding: 30rpx 30rpx 10rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 44rpx;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;

			.closeIcon {
				height: 44rpx;
				width: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.couponList{
			height: 624rpx;
		}
	}
</style>
